<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>探索世界首页</title>
  <!-- 引入外部资源 -->
  <script src="/js/vue.js"></script>
  <link type="text/css" rel="stylesheet" href="/css/index.css">
  <script src="/js/index.js"></script>
  <script src="/js/axios.min.js"></script>

  <style>
    /* 首页特有样式 */
    .dashboard-container {
      padding: 20px;
    }

    .stats-card {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      padding: 20px;
      margin-bottom: 20px;
      transition: all 0.3s ease;
    }

    .stats-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    }

    .stats-card-icon {
      font-size: 32px;
      color: var(--primary-color);
      margin-right: 15px;
    }

    .stats-card-info {
      flex: 1;
    }

    .stats-card-value {
      font-size: 24px;
      font-weight: bold;
      color: var(--primary-color);
    }

    .stats-card-label {
      color: #666;
      font-size: 14px;
    }

    .quick-access {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 20px;
    }

    .quick-btn {
      flex: 1;
      min-width: 120px;
      text-align: center;
      padding: 15px 10px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid transparent;
    }

    .quick-btn:hover {
      background-color: var(--primary-color);
      color: #fff;
      transform: scale(1.05);
      border-color: var(--accent-color);
    }

    .quick-btn-icon {
      font-size: 24px;
      margin-bottom: 8px;
      display: block;
    }

    .recent-activity {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      padding: 15px;
    }

    .activity-item {
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
    }

    .activity-item:last-child {
      border-bottom: none;
    }

    .activity-icon {
      margin-right: 10px;
      color: var(--accent-color);
    }

    .activity-content {
      flex: 1;
    }

    .activity-time {
      color: #999;
      font-size: 12px;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="dashboard-container">
    <!-- 欢迎信息 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="24">
        <div style="background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
          <h2>欢迎回来，管理员</h2>
          <p style="color: #666;">今天是 {{ currentDate }}，祝您工作顺利！</p>
        </div>
      </el-col>
    </el-row>

    <!-- 数据统计卡片 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6">
        <div class="stats-card" style="display: flex; align-items: center;">
          <i class="el-icon-map-location stats-card-icon"></i>
          <div class="stats-card-info">
            <div class="stats-card-value">{{ scenicCount }}</div>
            <div class="stats-card-label">景区总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stats-card" style="display: flex; align-items: center;">
          <i class="el-icon-user stats-card-icon"></i>
          <div class="stats-card-info">
            <div class="stats-card-value">{{ visitorCount }}</div>
            <div class="stats-card-label">游客总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stats-card" style="display: flex; align-items: center;">
          <i class="el-icon-document stats-card-icon"></i>
          <div class="stats-card-info">
            <div class="stats-card-value">{{ guideCount }}</div>
            <div class="stats-card-label">攻略总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stats-card" style="display: flex; align-items: center;">
          <i class="el-icon-notebook-2 stats-card-icon"></i>
          <div class="stats-card-info">
            <div class="stats-card-value">{{ noteCount }}</div>
            <div class="stats-card-label">游记总数</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 快捷访问 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="24">
        <div style="background-color: #fff; border-radius: 8px; padding: 15px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
          <h3 style="margin-top: 0; color: var(--primary-color);">快捷操作</h3>
          <div class="quick-access">
            <div class="quick-btn" @click="navigateTo('scenic.html')">
              <i class="el-icon-map-location quick-btn-icon"></i>
              <span>景区管理</span>
            </div>
            <div class="quick-btn" @click="navigateTo('visitors.html')">
              <i class="el-icon-user quick-btn-icon"></i>
              <span>游客管理</span>
            </div>
            <div class="quick-btn" @click="navigateTo('Guides.html')">
              <i class="el-icon-document quick-btn-icon"></i>
              <span>攻略管理</span>
            </div>
            <div class="quick-btn" @click="navigateTo('Notes.html')">
              <i class="el-icon-notebook-2 quick-btn-icon"></i>
              <span>游记管理</span>
            </div>
            <div class="quick-btn" @click="navigateTo('scenicPic.html')">
              <i class="el-icon-picture quick-btn-icon"></i>
              <span>景区图片</span>
            </div>
            <div class="quick-btn" @click="navigateTo('guideImages.html')">
              <i class="el-icon-camera quick-btn-icon"></i>
              <span>攻略图片</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="recent-activity">
          <h3 style="margin-top: 0; color: var(--primary-color);">最近动态</h3>
          <div v-for="(activity, index) in recentActivities" :key="index" class="activity-item">
            <i class="el-icon-circle-check activity-icon"></i>
            <div class="activity-content">
              <div>{{ activity.content }}</div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
          </div>
          <el-button type="text" style="color: var(--primary-color);" @click="loadMoreActivities">查看更多</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        currentDate: '',
        scenicCount: 0,
        visitorCount: 0,
        guideCount: 0,
        noteCount: 0,
        recentActivities: []
      }
    },
    created() {
      // 初始化日期
      this.initDate();
      // 获取统计数据
      this.fetchStatsData();
      // 获取最近活动
      this.fetchRecentActivities();
    },
    methods: {
      // 初始化当前日期
      initDate() {
        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        this.currentDate = new Date().toLocaleDateString('zh-CN', options);
      },

      // 获取统计数据
      fetchStatsData() {
        // 获取景区总数
        axios.get('/scenic/frontQueryAll')
                .then(response => {
                  if (response.data.code === 200) {
                    this.scenicCount = response.data.data ? response.data.data.length : 0;
                  }
                })
                .catch(error => {
                  console.error('获取景区统计数据失败', error);
                  this.$message.error('获取景区数据失败');
                });
        
        // 获取游客总数
        axios.post('/visitors/queryByPage', {
          pageNo: 1,
          pageSize: 1,
          data: {}
        }).then(response => {
          if (response.data.code === 200) {
            this.visitorCount = response.data.data.total;
          }
        }).catch(error => {
          console.error('获取游客统计数据失败', error);
          this.$message.error('获取游客数据失败');
        });
        
        // 获取攻略总数
        axios.post('/guides/queryByPage', {
          pageNo: 1,
          pageSize: 1,
          data: {}
        }).then(response => {
          if (response.data.code === 200) {
            this.guideCount = response.data.data.total;
          }
        }).catch(error => {
          console.error('获取攻略统计数据失败', error);
          this.$message.error('获取攻略数据失败');
        });
        
        // 获取游记总数
        axios.post('/notes/queryByPage', {
          pageNo: 1,
          pageSize: 1,
          data: {}
        }).then(response => {
          if (response.data.code === 200) {
            this.noteCount = response.data.data.total;
          }
        }).catch(error => {
          console.error('获取游记统计数据失败', error);
          this.$message.error('获取游记数据失败');
        });
      },

      // 获取最近活动
      fetchRecentActivities() {
        // 使用一些模拟数据作为示例
        this.recentActivities = [
          { content: "新增景区：黄山风景区", time: "2025-09-25 14:30" },
          { content: "用户张三完成了订单支付", time: "2025-09-25 10:15" },
          { content: "攻略《北京三日游》审核通过", time: "2025-09-24 16:45" },
          { content: "游记《海南之旅》发布成功", time: "2025-09-24 09:20" },
          { content: "新增景点：黄山迎客松", time: "2025-09-23 13:10" }
        ];
      },

      // 加载更多活动
      loadMoreActivities() {
        // 实现加载更多逻辑
        this.$message.info('加载更多活动');
      },

      // 导航到指定页面
      navigateTo(page) {
        // 兼容父页面的标签页导航逻辑
        if (window.parent && window.parent.addTab) {
          // 如果父页面有添加标签页的方法，则调用
          window.parent.addTab(page);
        } else {
          // 否则直接跳转
          window.location.href = page;
        }
      }
    }
  });
</script>
</body>
</html>